<template>
  <div>
    <!-- 搜索区域 -->
    <el-card>
      <el-form :inline="true" class="search-form">
        <el-form-item label="视频名称">
          <el-input
            placeholder="全站视频搜索"
            v-model="searchForm.videoName"
            class="search-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select
            v-model="searchForm.categoryId"
            placeholder="请选择"
            clearable
          >
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in categoryList"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-select
            v-model="searchForm.sort"
            placeholder="请选择"
            class="sort-select"
          >
            <el-option label="综合排序" value=""></el-option>
            <el-option label="最新优先" value="createTime"></el-option>
            <el-option label="播放量优先" value="playCount"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" class="search-btn">
            搜索
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 视频列表 -->
    <el-card style="margin-top: 20px">
      <el-table :data="mockVideoList" style="width: 100%" border>
        <el-table-column label="封面" width="180" align="center">
          <template #default="{ row }">
            <div class="video-cover">
              <el-image
                :src="row.cover"
                fit="cover"
                class="cover-image"
              ></el-image>
              <span class="video-duration">{{ row.timeLength }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="视频信息" min-width="400">
          <template #default="{ row }">
            <div class="video-info">
              <div class="video-title">{{ row.title }}</div>
              <div class="video-uploader">
                <span class="label">UP主:</span>
                <span class="value">{{ row.userName }}</span>
              </div>
              <div class="video-stats">
                <span class="stat-item">
                  <el-icon>
                    <VideoPlay />
                  </el-icon>
                  {{ row.playCount }}
                </span>
                <span class="stat-item">
                  <el-icon>
                    <Star />
                  </el-icon>
                  {{ row.likeCount }}
                </span>
                <span class="stat-item">
                  <el-icon>
                    <ChatDotRound />
                  </el-icon>
                  {{ row.commentCount }}
                </span>
                <span class="stat-item">
                  <el-icon>
                    <Message />
                  </el-icon>
                  {{ row.danmuCount }}
                </span>
                <span class="stat-item">
                  <el-icon>
                    <Share />
                  </el-icon>
                  {{ row.shareCount }}
                </span>
                <span class="stat-item">
                  <el-icon>
                    <Collection />
                  </el-icon>
                  {{ row.collectionCount }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="最后更新时间" width="180" align="center">
          <template #default="{ row }">
            {{ row.updateTime }}
          </template>
        </el-table-column>

        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === '未审核' ? 'warning' : 'success'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button
              size="small"
              type="primary"
              plain
              @click="viewDetail(row)"
            >
              详情
            </el-button>
            <el-button
              v-if="row.status === '未审核'"
              size="small"
              type="warning"
              plain
              @click="openAuditDialog(row)"
            >
              审核
            </el-button>
            <el-button
              v-else
              size="small"
              type="primary"
              plain
              @click="recommend(row)"
            >
              推荐
            </el-button>
            <el-button
              size="small"
              type="danger"
              plain
              @click="deleteVideo(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <span class="total-text">共 {{ total }} 条</span>
        <el-pagination
          v-model:current-page="current"
          v-model:page-size="pageSize"
          :page-sizes="[15, 20, 30, 50]"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="详情"
      width="80%"
      :destroy-on-close="true"
    >
      <div class="video-detail">
        <div class="detail-header">
          <div class="detail-tabs">
            <div class="tab active">视频分P</div>
            <div class="tab">基本信息</div>
          </div>
          <div class="detail-subtitle">红色标题代表视频有更新</div>
        </div>
        <div class="detail-content">
          <div class="video-parts">
            <div class="title-row">
              <span class="part-title">{{ currentVideo.title }}</span>
              <span class="update-time">{{ currentVideo.updateTime }}</span>
            </div>
            <div class="part-list">
              <div class="part-item active">
                <span class="part-num">P1</span>
                <span class="part-name">不装逼</span>
                <span class="part-duration">23:12</span>
              </div>
              <div class="part-item">
                <span class="part-num">P2</span>
                <span class="part-name">装逼怪</span>
                <span class="part-duration">08:00</span>
              </div>
            </div>
          </div>
          <div class="video-preview">
            <img
              :src="currentVideo.cover"
              class="preview-image"
              alt="视频预览"
            />
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog v-model="auditDialogVisible" title="审核" width="500px">
      <div class="audit-form">
        <el-form :model="auditForm" label-width="80px">
          <el-form-item label="审核结果" required>
            <el-radio-group v-model="auditForm.result">
              <el-radio label="审核通过">审核通过</el-radio>
              <el-radio label="审核不通过">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="拒绝理由"
            v-if="auditForm.result === '审核不通过'"
            required
          >
            <el-input
              v-model="auditForm.reason"
              type="textarea"
              rows="4"
              placeholder="请输入拒绝理由"
              maxlength="200"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="auditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAudit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { reqDelete, reqList } from '@/api/mis/video'
import { ElMessage } from 'element-plus'
import type { Video, VideoQueryRequest } from '@/api/mis/video/type'
import { Category } from '@/api/mis/category/type'
import { reqGetChildCategoryById } from '@/api/mis/category'
import {
  VideoPlay,
  Star,
  ChatDotRound,
  Message,
  Share,
  Collection,
} from '@element-plus/icons-vue'

// 分页相关
let current = ref<number>(1)
let pageSize = ref<number>(15)
let total = ref<number>(27)
let goToPage = ref<string>('1')

// 存储获取到的视频列表
let videoArr = ref<Video[]>([])

// 分类列表
const categoryList = ref<Category[]>([])

// 搜索表单
const searchForm = reactive({
  videoName: '',
  categoryId: '',
  sort: '',
})

// 详情对话框
const detailDialogVisible = ref(false)
const currentVideo = ref<any>({})

// 审核对话框
const auditDialogVisible = ref(false)
const auditForm = reactive({
  result: '审核通过',
  reason: '',
})

// 模拟数据
const mockVideoList = ref([
  {
    id: 1,
    cover:
      'https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682956800&t=e6174e0aa151c932300512b033070bb1',
    title: '萌试',
    userName: '程序员老罗',
    timeLength: '00:25',
    playCount: 3,
    commentCount: 0,
    likeCount: 0,
    danmuCount: 0,
    shareCount: 0,
    collectionCount: 0,
    updateTime: '2025-02-11 21:09:23',
    status: '未审核',
  },
  {
    id: 2,
    cover: 'https://picsum.photos/200/200?random=111',
    title: '美人鱼经典搞笑片段',
    userName: '程序员老罗',
    timeLength: '04:17',
    playCount: 110,
    commentCount: 0,
    likeCount: 0,
    danmuCount: 0,
    shareCount: 0,
    collectionCount: 0,
    updateTime: '2024-08-10 09:40:03',
    status: '审核成功',
  },
  {
    id: 3,
    cover: 'https://picsum.photos/200/200?random=112',
    title: '如愿',
    userName: '程序员老罗',
    timeLength: '04:25',
    playCount: 172,
    commentCount: 1,
    likeCount: 1,
    danmuCount: 3,
    shareCount: 1,
    collectionCount: 0,
    updateTime: '2024-08-04 11:38:21',
    status: '未审核',
  },
  {
    id: 4,
    cover: 'https://picsum.photos/200/200?random=113',
    title: '不装逼、装逼怪 权志龙经典小品',
    userName: '程序员老罗',
    timeLength: '31:12',
    playCount: 1535,
    commentCount: 25,
    likeCount: 20,
    danmuCount: 19,
    shareCount: 27,
    collectionCount: 16,
    updateTime: '2024-08-03 22:01:13',
    status: '审核成功',
  },
  {
    id: 5,
    cover: 'https://picsum.photos/200/200?random=114',
    title: '这样的田园生活在令人羡慕，明媚的下午，我想念乡村无忧无虑的生活',
    userName: '程序员老罗',
    timeLength: '01:07',
    playCount: 139,
    commentCount: 4,
    likeCount: 1,
    danmuCount: 4,
    shareCount: 5,
    collectionCount: 1,
    updateTime: '2024-08-03 21:25:55',
    status: '审核成功',
  },
  {
    id: 6,
    cover: 'https://picsum.photos/200/200?random=115',
    title: '这地方造的真香',
    userName: '程序员老罗',
    timeLength: '00:15',
    playCount: 54,
    commentCount: 0,
    likeCount: 0,
    danmuCount: 0,
    shareCount: 2,
    collectionCount: 1,
    updateTime: '2024-08-03 21:19:53',
    status: '未审核',
  },
  {
    id: 7,
    cover: 'https://picsum.photos/200/200?random=116',
    title: '周杰伦新歌《说好不哭》MV',
    userName: '音乐人小张',
    timeLength: '03:43',
    playCount: 2341,
    commentCount: 152,
    likeCount: 230,
    danmuCount: 45,
    shareCount: 89,
    collectionCount: 67,
    updateTime: '2024-07-15 16:30:22',
    status: '未审核',
  },
  {
    id: 8,
    cover: 'https://picsum.photos/200/200?random=117',
    title: '五分钟教你学会简单美味的家常菜',
    userName: '美食小达人',
    timeLength: '05:22',
    playCount: 783,
    commentCount: 47,
    likeCount: 89,
    danmuCount: 23,
    shareCount: 36,
    collectionCount: 42,
    updateTime: '2024-07-22 10:15:33',
    status: '未审核',
  },
])

// 挂载完成后获取视频列表和分类列表
onMounted(() => {
  // getAllVideo()
  getAllCategory()
})

// 获取所有分类
const getAllCategory = async () => {
  const result = await reqGetChildCategoryById(0) // 获取顶级分类
  if (result.code === '0') {
    categoryList.value = result.data || []
  }
}

// 获取视频列表
const getAllVideo = async () => {
  // 构造符合VideoQueryRequest的请求参数
  const requestParams: any = {
    videName: searchForm.videoName,
    userName: '',
    current: current.value,
    pageSize: pageSize.value,
  }

  const result = await reqList(requestParams)
  if (result.code === '0') {
    videoArr.value = result.data.records || []
    total.value = result.data.total || 0
  }
}

// 页码改变时的回调
const handleCurrentChange = () => {
  getAllVideo()
}

// 每页数据条数变化时的回调
const handleSizeChange = () => {
  current.value = 1
  getAllVideo()
}

// 搜索按钮的回调
const search = () => {
  current.value = 1
  getAllVideo()
}

// 删除视频
const deleteVideo = async (row: any) => {
  const params = {
    id: row.id,
  }
  const result = await reqDelete(params)
  if (result.code === '0') {
    ElMessage({ type: 'success', message: '删除成功！' })
    await getAllVideo()
  } else {
    ElMessage({ type: 'error', message: result.message || '删除失败！' })
  }
}

// 查看视频详情
const viewDetail = (row: any) => {
  currentVideo.value = row
  detailDialogVisible.value = true
}

// 推荐视频
const recommend = (row: any) => {
  console.log('推荐视频', row)
  ElMessage({ type: 'success', message: '已将该视频添加到推荐列表' })
}

// 打开审核对话框
const openAuditDialog = (row: any) => {
  currentVideo.value = row
  auditForm.result = '审核通过'
  auditForm.reason = ''
  auditDialogVisible.value = true
}

// 提交审核结果
const submitAudit = () => {
  if (auditForm.result === '审核不通过' && !auditForm.reason) {
    ElMessage({ type: 'warning', message: '审核不通过时必须填写拒绝理由' })
    return
  }

  // 更新视频状态
  const index = mockVideoList.value.findIndex(
    (item) => item.id === currentVideo.value.id,
  )
  if (index !== -1) {
    mockVideoList.value[index].status =
      auditForm.result === '审核通过' ? '审核成功' : '审核不通过'
  }

  ElMessage({
    type: 'success',
    message: `视频"${currentVideo.value.title}"${auditForm.result}！`,
  })
  auditDialogVisible.value = false
}
</script>

<style scoped lang="scss">
.search-form {
  display: flex;
  align-items: center;

  .search-input {
    width: 300px;
  }

  .sort-select {
    width: 150px;
  }

  .search-btn {
    margin-left: 10px;
  }
}

.video-cover {
  position: relative;
  width: 160px;
  height: 100px;
  margin: 0 auto;

  .cover-image {
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

  .video-duration {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
  }
}

.video-info {
  padding: 8px 0;

  .video-title {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .video-uploader {
    font-size: 13px;
    margin-bottom: 8px;

    .label {
      color: #999;
      margin-right: 4px;
    }

    .value {
      color: #666;
    }
  }

  .video-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #666;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 4px;

      .el-icon {
        font-size: 16px;
      }
    }
  }
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .total-text {
    margin-right: 16px;
    font-size: 13px;
    color: #606266;
  }
}

.el-table {
  :deep(.el-table__cell) {
    padding: 12px 0;
  }
}

/* 审核对话框样式 */
.audit-form {
  padding: 20px 0;

  .el-radio-group {
    display: flex;
    gap: 30px;
  }

  .el-form-item {
    margin-bottom: 25px;
  }
}

/* 详情对话框样式 */
.video-detail {
  display: flex;
  flex-direction: column;
  height: 600px;

  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 12px;
    border-bottom: 1px solid #eee;

    .detail-tabs {
      display: flex;
      gap: 20px;

      .tab {
        padding: 8px 0;
        cursor: pointer;
        font-size: 16px;
        color: #666;
        position: relative;

        &.active {
          color: #00a1d6;
          font-weight: bold;

          &:after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #00a1d6;
          }
        }
      }
    }

    .detail-subtitle {
      font-size: 13px;
      color: #999;
    }
  }

  .detail-content {
    display: flex;
    margin-top: 20px;
    height: calc(100% - 50px);

    .video-parts {
      width: 30%;
      border-right: 1px solid #eee;
      padding-right: 20px;
      overflow-y: auto;

      .title-row {
        margin-bottom: 16px;

        .part-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          display: block;
          margin-bottom: 8px;
        }

        .update-time {
          font-size: 13px;
          color: #999;
        }
      }

      .part-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .part-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
          background-color: #f5f5f5;
        }

        &.active {
          background-color: #e1f0ff;

          .part-num {
            color: #00a1d6;
          }

          .part-name {
            color: #00a1d6;
            font-weight: bold;
          }
        }

        .part-num {
          color: #00a1d6;
          width: 30px;
          margin-right: 10px;
          font-size: 14px;
        }

        .part-name {
          flex: 1;
          font-size: 14px;
          color: #333;
        }

        .part-duration {
          color: #999;
          font-size: 13px;
        }
      }
    }

    .video-preview {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;

      .preview-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
  }
}
</style>
